<template>
   <div class="wrap">
        <input 
            :type="type"
            :placeholder="text"
            v-model="content"
            class="input"
        >
        <transition>
            <p v-show="isShow">{{pText}}</p>
        </transition>
   </div>
</template>

<script>
    export default {
        name:"User-Input",
        props:['text','type','rule','pText'],
        data(){
            return {
                content:"",
                isShow:false,
            }
        },
        methods:{
            handlerRulg(){
                const str = new RegExp(this.rule)
                if(str.test(this.content)){
                    this.$emit('getUserInfo',this.content)
                    this.isShow = false
                }else{
                    this.isShow = true
                }
            }
        },
        watch:{
            content(){
                this.handlerRulg()
            }
        }
    }
</script>

<style scoped>
    .v-enter,.v-leave-to{
        opacity: 0;
    }

    .v-enter-to,.v-leave{
        opacity: 1;
    }

    .wrap{
        margin-bottom: 1.6vw;
        position: relative;
    }
    .input{
        margin: 0.5vw 0 1vw 0;
    }
    input{
        width: 20vw;
        height: 3.2vw;
        background: #eae3ee;
        border: 1px solid #586D97;
        border-radius: 1.6vw;
        outline: none;
        padding-left: 1vw;
        transition: .5s;
    }

    p{
        /* margin-top: 0.5vw; */
        color: red;
        position: absolute;
        font-size: 0.8vw;
        transition: 1s;
    }

    input:focus{
        font-size: 1.3vw;
    }
</style>